<template>
  <div class="app-container">
    <el-form v-loading="listLoading" ref="form" element-loading-background="rgba(255, 255, 255, 0.95)" >
      <el-form-item>
        <el-button v-if="!formDis" type="primary" class="addBtn" @click="add()">新增溯源环节</el-button>
        <p v-if="!resList.linkGoodsList.length" class="tips">还没有任何溯源环节，请快快添加溯源环节吧!</p>
        <!-- {{ rowIndex }}
        {{ rowIndex1 }} -->
        <table v-if="formDis" class="titleTable">
          <tr>
            <td>
              <span>商品类型:</span> {{ parentData.categoryName }}
            </td>
          </tr>
          <tr>
            <td>
              <span>商品名称:</span>  {{ parentData.goodName }}
            </td>
          </tr>
          <tr>
            <td>
              <span>备注:</span>  {{ parentData.remarks || '暂无备注' }}
            </td>
          </tr>
        </table>
        <ul class="list_ul">
          <li v-for="(item, index) in resList.linkGoodsList" :key="index">
            <div :class="['indexBox',{'border-bottom': rowIndex === index}]">
              <div class="index fl" @click="showDetail(index)">
                环节{{ index + 1 }}&nbsp;{{ item.linkName }}&nbsp;&nbsp;
                <span :class="[{'rotate90':rowIndex === index }, 'triangle']"/>
              </div>
              <div class="fr">
                <el-button v-if="!formDis" size="mini" type="primary" @click="move(index, 'up')">上移</el-button>
                <el-button v-if="!formDis" size="mini" type="primary" @click="move(index, 'down')">下移</el-button>
                <el-button v-if="!formDis" size="mini" type="primary" @click="edit(index)">编辑</el-button>
                <el-button v-if="!formDis" size="mini" type="danger" @click="del(index)">删除</el-button>
              </div>
            </div>

            <div :ref="'li'+index" :style="{height:(rowIndex === index? arrH[index]+'px':contentH0)}" class="content" >
              <!-- <div :ref="'li'+index" :class="['content']" :style="{height:(rowIndex === index? 'p':contentH0+'px')}" > -->
              <el-row>
                <el-col :span="24">
                  <el-row style="margin-top:20px;">
                    <el-col :span="3" align="right" class="col w100">
                      溯源环节名称：
                    </el-col>
                    <el-col :span="18" class="col lightGary">
                      {{ item.linkName }}
                    </el-col>
                  </el-row>
                  <el-row style="margin-top:10px;">
                    <el-col :span="3" align="right" class="col w100">
                      说明：
                    </el-col>
                    <el-col :span="18" class="col lightGary">
                      {{ item.description }}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-col>
                <table class="table">
                  <thead>
                    <tr>
                      <td width="100" style="width:100px">类型</td>
                      <td>内容</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{{ item.type | typeStr }}</td>
                      <td>
                        <div class="contentText">
                          <span v-if="item.type==0">{{ item.content }}</span>
                        </div>
                        <span v-if="item.type==1"><img :src="item.content" class="img"></span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-col>
            </div>
          </li>
        </ul>
        <div class="bottomBtn">
          <!-- <el-button v-preventReClick v-if="isConfig && !formDis" type="primary" @click="submitForm()">确定</el-button> -->
          <el-button v-preventReClick v-if="!formDis" type="primary" @click="submitForm()">确定</el-button>
          <el-button v-preventReClick @click="$router.go(-1)">关闭</el-button>
        </div>
      </el-form-item>
    </el-form>
    <AddSourceStep
      :settings-visible.sync="dialogVisible"
      :dialog-data.sync="rowData"
      :my-index.sync="detailIndex"
      :setting-mode="'addStep'"
      @updataParent="submitFn"/>
  </div>
</template>
<script>
import AddSourceStep from '@/components/source/addSourceStep'
import { Message } from 'element-ui'
import { updateYuanConfig, getSuYuanGoodsDetail } from '@/api/source'
export default {
  components: { AddSourceStep },
  filters: {
    typeStr(num) {
      const strMap = {
        0: '文字',
        1: '图片'
      }
      return strMap[num]
    }
  },
  data() {
    return {
      dialogVisible: false,
      rowData: {},
      rowIndex: -1,
      rowIndex1: -1,
      detailIndex: -1,
      isConfig: false,
      formDis: false,
      resList: {
        goods: '',
        id: '',
        status: '',
        traceabilityTemplateId: '',
        remarks: '',
        linkGoodsList: [
        //   {
        //     linkName: '种子采集',
        //     description: '我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,我是说明,',
        //     type: 0,
        //     content: '内容：种子采集'
        //   },
        //   {
        //     linkName: '种植',
        //     description: '我是说明,我是说明,',
        //     type: 0,
        //     content: '种植'
        //   }
        ]
      },
      parentData: [],
      listLoading: true,
      arrH: [],
      contentH: '',
      contentH0: 'auto'
    }
  },
  mounted() {
    if (this.$route.query && JSON.stringify(this.$route.query) !== '{}') {
      this.isConfig = this.$route.query.hasOwnProperty('isConfig') ? this.$route.query.isConfig : false;
      this.formDis = Boolean(this.$route.query.isLook)
      const a = this.$route.query
      this.parentData = a
      console.log('配置信息：', a)
      if (this.isConfig || this.formDis) {
        this.getSuYuanGoodsDetail(a.id)
      }
    }
    // this.getHeight()
  },
  methods: {
    getSuYuanGoodsDetail(id) {
      getSuYuanGoodsDetail({ id }).then(res => {
        if (res.code === '200') {
          console.log('溯源详情：', res)
          this.resList = Object.assign({}, res.data)
          this.getHeight()
        }
      })
    },
    // 上移、下移
    move(index, type) {
      const list = this.resList.linkGoodsList
      if (list.length) {
        if (index === 0 && type === 'up') return Message.error('第一个无法上移')
        if (index === list.length - 1 && type === 'down') return Message.error('最后一个无法下移动')
        const obj = list.splice(index, 1)
        const hIndex = this.arrH.splice(index, 1)
        if (type === 'up') {
          console.log(index, obj[0])
          list.splice(index - 1, 0, obj[0])
          this.arrH.splice(index - 1, 0, hIndex[0])
          // this.rowIndex--
        }
        if (type === 'down') {
          console.log(index, obj[0])
          list.splice(index + 1, 0, obj[0])
          this.arrH.splice(index + 1, 0, hIndex[0])
          // this.rowIndex++
        }
      }
    },
    getHeight() {
      this.listLoading = true
      this.contentH0 = 'auto'
      this.arrH = [];
      setTimeout(() => {
        this.resList.linkGoodsList.forEach((item, index) => {
          this.arrH.push(this.$refs['li' + index][0].clientHeight)
        })
        this.contentH0 = '0px'
        this.listLoading = false
      }, 1000)
    },
    add() {
      // this.contentH0 = 'auto'
      this.dialogVisible = true
    },
    edit(index) {
      this.detailIndex = index
      this.rowIndex1 = index
      this.rowIndex = -1
      this.rowData = this.resList.linkGoodsList[index]
      this.dialogVisible = true
    },
    // 删除
    del(index) {
      this.$confirm('确定删除此环节？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.resList.linkGoodsList.splice(index, 1)
      })
    },
    // 新增弹窗点击确定
    submitFn(val) {
      // console.log(this.detailIndex)
      if (this.detailIndex === -1) { // 新增
        this.resList.linkGoodsList.push(val)
      } else {
        this.$set(this.resList.linkGoodsList, this.detailIndex, val)
      }
      updateYuanConfig(this.resList).then(res => {
        if (res.code === '200') {
          Message.success('编辑成功')
        }
      })
      this.getHeight()
      setTimeout(() => {
        this.rowIndex = this.rowIndex1
      }, 200)
      console.log('环节返回给我的数据：', val)
    },
    showDetail(index) {
      console.log(this.$refs['li' + index][0].clientHeight)
      if (this.rowIndex === index) {
        this.rowIndex = -1
        this.contentH = 0
      } else {
        this.rowIndex = index
        this.contentH = this.$refs['li' + index][0].clientHeight
      }
    },
    submitForm() {
      updateYuanConfig(this.resList).then(res => {
        if (res.code === '200') {
          Message.success('操作成功')
          this.$router.go(-1)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tips{
        line-height: 50px;
        width: 100%;
        text-align: center;
        color: #666;
        font-size: 16px;
    }
.fl{
    float: left;
}
.fr{
    float: right;
}
.bottomBtn{
    padding-top: 20px;
    width:100%;
    text-align: center;
    border: 0;
}
.bottomBtn button{
    display: inline-block;
}
.list_ul{
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    overflow: hidden;
    padding: 0;
    li{
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        line-height: 50px;
        box-sizing: border-box;

        .indexBox{
            overflow:  hidden;
            padding: 0 20px;
            background-color: #f5f5f5;
            // border-bottom: 1px solid #ddd;
        }
        .index{
            width: 60%;
            font-size: 14px;
            cursor: pointer;
        }
        .content{
            width:100%;
            // border-top: 1px solid #ddd;
            margin-top: 0px;
            // min-height: 0;
            overflow: hidden;
            transition: all .5s;
            -webkit-transition: all .5s
        }
        .contentText{
                width:800px;
                word-wrap:break-word !important;
                text-align: left;
                padding:0 10px;
                line-height: 30px;
                box-sizing: border-box;
            }
        .border-bottom{
            border-bottom: 1px solid #ddd;
        }
        .noHeight{
            height: '';
        }
    }

    .triangle{
        width:0;
        height:0;
        border-top:5px solid transparent;
        border-bottom:5px solid transparent;
        border-left:5px solid #409EFF;
        display: inline-block;
        transition: all .5s;
    }

    .rotate90 {
        transform:rotate(90deg);
    }

    .col{
        line-height: 30px;
        font-size: 14px;
        margin: 0;
    }

    .w100{
        width:110px;
    }

    .table{
        margin: 20px;

    }

    .lightGary{
        color: #666;
    }

    .table{
        width: 96.5%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .table td{
        border: 1px solid #DDD;
        font-size: 13px;
        text-align: center;
    }

    .table thead{
        background: #f9f9f9;
    }

    .table tbody{
        color: #666
    }

    .img{
        width: 200px;
        height: 190px;
    }
}
.titleTable{
    width:100%;
    line-height: 30px;
    color: #666;
    margin-top: 10px;
    span {
        color: #333;
    }
}
</style>
